import 'package:demo/empUtils/EMPColorUtils.dart';
import 'package:demo/empUtils/EMPThemeUtils.dart';
import 'package:flutter/material.dart';
import 'package:demo/empUtils/EMPTextStyle.dart';

import 'empUtils/EMPTextStyle.dart';
import 'package:flutter_constraintlayout/flutter_constraintlayout.dart';


class testLayout extends StatefulWidget {
  const testLayout({super.key});

  @override
  _testLayoutState createState() => _testLayoutState();
}

class _testLayoutState extends State<testLayout> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: const Text('测试列表')), body: _buildbody());
  }

  ConstraintId botmeTitle = ConstraintId('botmeTitle');

  Widget _buildbody() {
    return ConstraintLayout().open(() {
      for (int i = 0; i < 5; i++) {
        Row().open(() {

          Container(
            color: Colors.red,

            child: Row().open(() {

              Text('vvvvv${i}').enter();

              // Container(
              //   color: Colors.yellow,
              //   child: Text('aaaa'),
              // ).applyConstraint(
              //   size: 100,
              //   centerTo: parent,
              // );
              // Container(
              //   color: Colors.green,
              //   child: Text('ccc'),
              // ).applyConstraint(
              //   size: 100,
              //   left: parent.left,
              // );
              // Container(
              //   color: Colors.purple,
              //   child: Text('bbb'),
              // ).applyConstraint(
              //   size: 100,
              //   left: sId(-1).right.margin(10),
              // );

            }),
          ).applyConstraint(
              width: 20,
              left: parent.left.margin(200)
          );


        }).applyConstraint(
          height: 50,
          left: parent.left.margin(10),
          top: i == 0 ? parent.top : sId(-1).bottom.margin(20),
        );
      }

      // for (int j = 0; j < 10; j++) {
      //   Text("$i x $j").enter();
      // const SizedBox(
      //     width: 10,
      //   ).enter();
      // }

      // int i = 0;
      // while (i < 100) {
      //   Text("$i").applyConstraint(
      //     left: parent.left,
      //     top: i == 0 ? parent.top : sId(-1).bottom,
      //   );
      //   i++;
      // }
      //
      //
      // Container(
      //   color: Colors.red,
      //   child: Text('aaaa'),
      // ).applyConstraint(
      //   size: 100,
      //   centerTo: parent,
      // );

    });
  }



    // return Row(
    //   children: [
    //
    //     Container(
    //       color: Colors.yellow,
    //       child: Text('aaaaaa'),
    //     ).applyConstraint(
    //         id: botmeTitle,
    //         size: 50,
    //         centerTo: parent
    //     ),
    //     // Container(
    //     //   color: Colors.red,
    //     //   child: Text('bbbb'),
    //     // ).applyConstraint(
    //     //     size: 50,
    //     //     left: botmeTitle.left
    //     // )
    //   ],
    // );



}


//简单来说，enter 是配合 open 来用的,调用 enter 的 widget 会被添加到调用  open 的 widget 中作为它的 children。
//这样就可以使用任意语法来组织子元素

